<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          type="primary"
          @click="handleSearchList()"
          size="small"
        >
          查询搜索
        </el-button>
        <el-button
          style="float: right; margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="listQuery"
          size="small"
          label-width="140px"
        >
          <el-form-item label="手机号：">
            <el-input
              v-model="listQuery.username"
              class="input-width"
              placeholder="手机号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名：">
            <el-input
              v-model="listQuery.name"
              class="input-width"
              placeholder="姓名"
              clearable
            ></el-input>
          </el-form-item>
          <!--          <el-form-item label="社区名称：">-->
          <!--            <el-input v-model="listQuery.community" class="input-width" placeholder="社区名称" clearable></el-input>-->
          <!--          </el-form-item>-->
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <div class="operate-pad">
        <div class="title">
          <i class="el-icon-tickets"></i>
          <span>数据列表</span>
        </div>
        <div class="right">
          <a href="/static/正德用户导入模板.xlsx" target="_blank">
            <el-button class="download" size="small">下载模板</el-button>
          </a>
          <file-upload></file-upload>
        </div>
      </div>
    </el-card>
    <div class="table-container">
      <el-table
        ref="adminTable"
        :data="list"
        style="width: 100%"
        v-loading="listLoading"
        border
      >
        <el-table-column label="手机号" align="center">
          <template slot-scope="scope">{{ scope.row.phone }}</template>
        </el-table-column>
        <el-table-column label="姓名" align="center">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <!--        <el-table-column label="状态" align="center">-->
        <!--          <template slot-scope="scope">{{ status[scope.row.status] }}</template>-->
        <!--        </el-table-column>-->
        <el-table-column label="昵称" align="center">
          <template slot-scope="scope">{{ scope.row.nickname }}</template>
        </el-table-column>
        <el-table-column label="身份证" align="center">
          <template slot-scope="scope">{{ scope.row.idCard }}</template>
        </el-table-column>
        <el-table-column label="用户身份" align="center">
          <template slot-scope="scope">{{
            scope.row.userIdentity && userIdentityEmun[scope.row.userIdentity]
          }}</template>
        </el-table-column>
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">{{
            scope.row.userType | formatUserType
          }}</template>
        </el-table-column>
        <el-table-column label="注册时间" width="160" align="center">
          <template slot-scope="scope">{{
            scope.row.createTime | formatDateTime
          }}</template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleDetails(scope.$index, scope.row)"
            >
              查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.$index, scope.row)"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10, 15, 20]"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="isEdit ? '修改信息' : '修改用户'"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <el-form
        :model="admin"
        :rules="rules"
        ref="adminForm"
        label-width="150px"
        size="small"
      >
        <el-form-item label="手机号：">
          <el-input v-model="admin.phone"></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="admin.name"></el-input>
        </el-form-item>
        <el-form-item label="昵称：">
          <el-input v-model="admin.nickname"></el-input>
        </el-form-item>
        <el-form-item label="身份证：">
          <el-input v-model="admin.idCard"></el-input>
        </el-form-item>
        <el-form-item label="类型：">
          <el-select
            v-model="admin.userType"
            placeholder="全部"
            clearable
            class="input-width"
          >
            <el-option
              v-for="(item, index) in userType"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市：" prop="province">
          <single-address
            ref="singleAddress"
            class="input-width"
          ></single-address>
        </el-form-item>
        <el-form-item label="社区：">
          <el-input v-model="admin.communityName"></el-input>
        </el-form-item>
        <el-form-item label="楼号：">
          <el-input v-model="admin.floor"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input
            prop="password"
            v-model="admin.password"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-select v-model="admin.gender" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日：">
          <el-date-picker
            class="input-width"
            v-model="admin.birthday"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="请选择时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户身份：">
          <el-select
            v-model="admin.userIdentity"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in userIdentityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button
          type="primary"
          @click="handleDialogConfirm('adminForm')"
          size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import FileUpload from '@/components/Upload/fileUpload'
import { fetchMemberList, updateMemberAdmin } from '@/api/login'
import { getMenberById } from '@/api/memberLevel'
import { formatDate } from '@/utils/date'
import SingleAddress from '@/components/SingleAddress'
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  username: null,
  phone: ''
  // community: "",
}
const defaultAdmin = {
  username: null,
  password: null,
  city: null,
  // id: 0,
  memberLevelId: 0,
  phone: '',
  gender: '',
  idCard: '',
  communityName: '',
  name: '',
  nickname: '',
  floor: '',
  birthday: '',
  userType: '',
  cityCode: '',
  userIdentity: ''
}
export default {
  data () {
    return {
      userType: [
        {
          value: '01',
          label: '服务学习类'
        },
        {
          value: '02',
          label: '学院类'
        },
        {
          value: '03',
          label: '服务、学院'
        }
      ],
      options: [
        {
          value: 1,
          label: '男'
        },
        {
          value: 2,
          label: '女'
        }
      ],
      userIdentityEmun: {
        '01': '居民',
        '02': '居委会',
        '03': '物业公司',
        '04': '业委会',
        '05': '物管会',
        '06': '管理员',
        '07': '供应商',
        '08': '政府组织',
        '09': '其他'
      },
      userIdentityOptions: [
        {
          value: '01',
          label: '居民'
        },
        {
          value: '02',
          label: '居委会'
        },
        {
          value: '03',
          label: '物业公司'
        },
        {
          value: '04',
          label: '业委会'
        },
        {
          value: '05',
          label: '物管会'
        },
        {
          value: '06',
          label: '管理员'
        },
        {
          value: '07',
          label: '供应商'
        },
        {
          value: '08',
          label: '政府组织'
        },
        {
          value: '09',
          label: '其他'
        }
      ],
      value: '男',
      adress: [],
      optionsAdress: [],
      props: {
        value: 'code',
        label: 'name',
        children: 'cities'
      },
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      dialogVisible: false,
      admin: Object.assign({}, defaultAdmin),
      isEdit: false,
      rules: {
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  components: { SingleAddress, FileUpload },
  created () {
    this.getList()
    // this.getProvice()
  },
  mounted () { },
  filters: {
    formatDateTime (time) {
      if (time == null || time === '') {
        return 'N/A'
      }
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    formatUserType (value) {
      if (value == '01') {
        return '服务类'
      } else if (value == '02') {
        return '学院类'
      } else {
        return '服务、学院'
      }
    }
  },
  methods: {
    handleChange (val) {
      this.admin.province = val[0]
      this.admin.city = val[1]
      // console.log(8,val);
    },
    // handleAud (index, row) {
    //   this.$router.push({ path: '/user-ms/aud', query: { id: row.id } })
    // },
    handleDetails (index, row) {
      this.$router.push({
        path: '/user-ms/appDetails',
        query: { id: row.id, username: row.username }
      })
    },
    handleResetSearch () {
      this.listQuery = Object.assign({}, defaultListQuery)
    },
    handleSearchList () {
      this.listQuery.pageNum = 1
      this.getList()
      console.log(this.listQuery)
    },
    handleSizeChange (val) {
      this.listQuery.pageNum = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.pageNum = val
      this.getList()
    },
    handleUpdate (index, row) {
      const { province, city, area } = row
      getMenberById({ id: row.id }).then((response) => {
        this.admin = response.data
        if (province && province.indexOf('{') > -1) {
          const addrInfo = {
            ...JSON.parse(province),
            ...JSON.parse(area),
            ...JSON.parse(city)
          }
          const setAddrInfo = [
            addrInfo.provCode,
            addrInfo.cityCode,
            addrInfo.countyCode
          ]
          setTimeout(() => {
            this.$refs.singleAddress.init(addrInfo)
            this.$refs.singleAddress.setDefValue(setAddrInfo)
          }, 10)
        }
      })
      this.dialogVisible = true
      this.isEdit = true
      // this.admin = Object.assign({}, row);

      this.admin = Object.assign(this.admin, row)
    },
    handleDialogConfirm (adminForm) {
      this.$refs[adminForm].validate((valid) => {
        if (valid) {
          this.$confirm('是否要确认?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (this.isEdit) {
              const {
                provCode,
                provName,
                cityCode,
                cityName,
                countyCode,
                countyName
              } = this.$refs.singleAddress.getProdReleaseAreaList()[0]

              const address = {
                province: JSON.stringify({ provCode, provName }),
                cityCode: JSON.stringify({ cityCode, cityName }),
                countyCode: JSON.stringify({ countyCode, countyName })
              }

              const {
                userType,
                username,
                password,
                gender,
                id,
                memberLevelId,
                phone,
                idCard,
                communityName,
                name,
                nickname,
                floor,
                birthday,
                userIdentity
              } = this.admin

              const params = {
                ...address,
                userType,
                username,
                password,
                gender,
                id,
                memberLevelId,
                phone,
                idCard,
                communityName,
                name,
                nickname,
                floor,
                birthday,
                userIdentity
              }
              console.log(params.phone)
              console.log(params.username)
              params.username = params.phone

              if (password && password.length > 12) {
                delete params.password
              }

              updateMemberAdmin(params).then((response) => {
                this.$message({
                  message: '修改成功！',
                  type: 'success'
                })
                this.dialogVisible = false
                this.getList()
              })
            }
          })
        }
      })
    },
    getList () {
      this.listLoading = true
      fetchMemberList(this.listQuery).then((response) => {
        this.listLoading = false
        console.log(response.data.list)
        this.list = response.data.list
        this.total = response.data.total
      })
    }
  }
}
</script>
<style scoped>
.button {
  float: right;
  right: 0;
}
.operate-pad {
  display: flex;
  justify-content: space-between;
}
.title {
  display: flex;
  align-items: center;
}
.right {
  display: flex;
}
.download {
  margin-right: 20px;
}
</style>
